<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="search">
        <div>
          姓名：
          <el-input class="userName" placeholder="请输入用户姓名" v-model="userName" clearable>
          </el-input>
          配镜日期：
          <el-date-picker style="margin-right:20px;" v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
          手机号：
          <el-input class="userName"  placeholder="请输入用户手机号" v-model="phone" clearable>
          </el-input>
          <el-button type="primary" @click="handelSearch">查询</el-button>
        </div>
        <div>

          <download-excel style="display:inline-block;" class="export-btn" :data="data" :fields="jsonFields" type="xls"
            header="人员信息表" name="人员信息表.xls">
            <el-button type="primary" @click="handelExport">导出</el-button>
          </download-excel>
          <el-button type="success" @click="handelCreated">新增</el-button>
        </div>
      </div>
      <el-table :data="data" border style="width: 100%" id="out-table">
        <el-table-column type="index" label="序号" :index="indexMethod" width="60">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="age" label="年龄"> </el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column prop="matchTime" label="配镜日期"></el-table-column>
        <el-table-column prop="fetchTime" label="取镜日期"></el-table-column>
        <el-table-column prop="allPrice" label="付款金额（元）"></el-table-column>
        <el-table-column label="操作" width="220">
          <template v-slot="scoped">
            <el-button type="warning" size="mini" @click="handelLook(scoped.row.id,scoped.$index)" plain>查看</el-button>
            <el-button type="success" size="mini" @click="handelDetail(scoped.row.id,scoped.$index)" plain>编辑
            </el-button>
            <el-button type="danger" size="mini" @click="handelDelete(scoped.row.id)" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10"
        layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  // 引入导出Excel表格依赖
  // import FileSaver from "file-saver";
  // import XLSX from "xlsx";
  export default {
    data() {
      return {
        userName: "",
        time: ["", ""],
        phone: "",
        total: 0,
        currentPage: 1,
        data: [],
        jsonFields: {
          '姓名': 'name',
          '性别': 'sex',
          '年龄': 'age',
          '电话': 'phone',
          '配镜日期': 'matchTime',
          '取镜日期': 'fetchTime',
          '付款金额': 'allPrice'

        }
      };
    },
    created() {
      this.getData()
    },
    computed: {
      dataExcel() {
        let data = []
        this.data.forEach(val => {
          data.push(val.name)
          data.push(val.sex)
          data.push(val.age)
          data.push(val.phone)
          data.push(val.matchTime)
          data.push(val.fetchTime)
          data.push(val.allPrice)
        })
      }
    },
    mounted() {},
    methods: {
      async getData() {
        const {
          data: res
        } = await this.$http({
          url: "project/getProject?name=" + this.userName + "&startTime=" + this.time[0] + "&endTime=" + this
            .time[1] + "&phone=" + this.phone + "&page=" + this.currentPage + "&num=10",
          method: 'get',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        this.data = res.list
        this.total = res.count
      },
      async deleteData(id) {
        const {
          data: res
        } = await this.$http({
          url: "project/deleteProject?id=" + id,
          method: 'post',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        this.$message({
          type: "success",
          message: "删除成功!"
        });
        this.getData()
      },
      indexMethod(index) {
        return index + (this.currentPage - 1) * 10 + 1
      },
      handelSearch() {
        this.getData()
      },
      handelDetail(id, index) {
        this.$router.push("/userDetail?id=" + id);
        this.$store.commit("detailData", this.data[index])
        this.$store.commit("status", 'edit')
      },
      handelCreated() {
        this.$router.push("/userDetail");
        this.$store.commit("status", 'add')
      },
      handelDelete(id) {
        this.$confirm("确定要删除该条数据吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.deleteData(id)
          })
          .catch(() => {});
      },
      handelLook(id, index) {
        this.$router.push("/userDetail?id=" + id);
        this.$store.commit("detailData", this.data[index])
        this.$store.commit("status", 'look')
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getData()
      },
      handelExport() {
        // /* 从表生成工作簿对象 */
        // let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        // /* 获取二进制字符串作为输出 */
        // var wbout = XLSX.write(wb, {
        //   bookType: 'xlsx',
        //   bookSST: true,
        //   type: 'array'
        // })
        // try {
        //   FileSaver.saveAs(
        //     //Blob 对象表示一个不可变、原始数据的类文件对象。
        //     //Blob 表示的不一定是JavaScript原生格式的数据。
        //     //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
        //     //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
        //     new Blob([wbout], {
        //       type: 'application/octet-stream',
        //     }),
        //     //设置导出文件名称
        //     '人员信息表.xlsx'
        //   )
        // } catch (e) {
        //   if (typeof console !== 'undefined') console.log(e, wbout)
        // }
        // return wbout

        // const columns = ["姓名", "性别"]
        // const list = this.data
        // const excelName = "123.xls"

      }
    },
    watch: {
      time() {
        if (this.time == null) {
          return this.time = ["", ""]
        }
      }
    }
  };

</script>

<style lang="less" scoped>
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .userName {
      width: 200px;
      margin-right: 20px;
    }

    .el-button {
      margin-left: 20px;
    }
  }

  .el-card .el-table {
    min-height: 660px;
  }

  .el-pagination {
    text-align: center;
    margin-top: 15px;
  }

</style>
